<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link type="text/css" rel="stylesheet" href="css/view/tailwind.min.css">
    <!--    <link type="text/css" rel="stylesheet" href="css/view/google.css">-->
    <link rel="stylesheet" href="css/markdown/toastui-editor-viewer.min.css"/>
    <link rel="stylesheet" href="css/markdown/github.min.css"/>
    <link rel="stylesheet" href="css/menu/normalize.css"/>

    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css'>
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-list.svg'>
    <style>
        .quicksand {
            font-family: 'Nunito', sans-serif;
        }

        ::selection {
            background: #E9D8FD;
            color: #202684;

            /* WebKit/Blink Browsers */
        }

        ::-moz-selection {
            background: #E9D8FD;
            color: #202684;
            /* Gecko Browsers */
        }

        a:not(.nav) {
            font-weight: bold;
            text-decoration: none;
            padding: 2px;
            background: linear-gradient(to right, #5A67D8, #5A67D8);
            background-repeat: repeat-x;
            background-size: 100% 2px;
            background-position: 0 95%;
            -webkit-transition: all 150ms ease-in-out;
            -moz-transition: all 150ms ease-in-out;
            -ms-transition: all 150ms ease-in-out;
            -o-transition: all 150ms ease-in-out;
            transition: all 150ms ease-in-out;
        }

        a:hover {
            color: #B794F4;
            font-weight: bold;
            text-decoration: none;
            padding-bottom: 2px;
            background: linear-gradient(to right, #9F7AEA, #E9D8FD);
            background-repeat: repeat-x;
            background-size: 100% 2px;
            background-position: 50% 95%;
            -webkit-transition: color 150ms ease-in-out;
            -moz-transition: color 150ms ease-in-out;
            -ms-transition: color 150ms ease-in-out;
            -o-transition: color 150ms ease-in-out;
            transition: color 150ms ease-in-out;
        }

        a:focus {
            outline: none;
            background: #E9D8FD;
        }

        .view-top {
            width: 100%;
            background-color: #fff;
            position: fixed;
            display: inline-block;
            padding-bottom: 10px;
        }

        .view-back {
            display: inline-block;
            padding-left: 16px;
            padding-right: 16px;
            color: #777;
            font-weight: bold;
            font-family: 'Ubuntu', sans-serif;
            transition: all 1000ms cubic-bezier(0.23, 1, 0.32, 1);
            padding: 8px 20px;
            line-height: 1.5;
            border: 1px solid #b39964;
            border-radius: 5px;
            text-align: center;
            margin: 10px 0 0 5%;
            width: 90%;
            color: #b39964;
            cursor: pointer;
        }

        body {
            background-color: #494a5f;
            color: #fff;
            font-family: open sans, sans-serif;
            font-size: 12px
        }

        .center {
            position: fixed;
            margin: auto;
            right: 5em;
            bottom: 5em;
        }

        .menu {
            width: 40px;
            height: 40px
        }

        .title {
            width: 300px;
            height: 10px;
            top: 60px
        }

        .item {
            position: absolute;
            left: 0;
            top: 0;
            width: 30px;
            height: 30px;
            background-color: #fff;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            cursor: pointer;
            text-align: center;
            line-height: 30px;
        }

        i {
            font-size: 24px;
            color: #222
        }

        .menu_hidden .docmenu_item {
            display: none;
        }


        .docmenu_item {
            position: absolute;
            padding-left: 9px;
            left: -14em;
            top: 0;
            width: 13em;
            height: 30px;
            border-radius: 20px 10px 10px 20px;
            background-color: inherit;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #000;
            cursor: pointer;
            font-weight: 900;
            text-align: center;
            line-height: 30px;
            font-family: open sans, sans-serif;
            font-size: 11px;
        }

        #top_menu {
            /*margin-left: 10%;*/
            border: 1px solid #ebc9c9;
            padding: 14px;
        }

        #top_menu div {
            cursor: pointer;
        }

        #top_menu div:hover {
            text-decoration: underline;
        }


        .h2title {
            font-size: 1.5em;
        }

        .h3title {
            font-size: 1.2em;
            margin-left: 5%;
        }


    </style>

</head>
<body>

<div class="center doc-menu-container zge menu_hidden">
    <div id="myMenu"></div>
</div>

<div class="mybody bg-white text-gray-700 font-sans quicksand">
    <div class="view-top">
        <div class="view-back" onclick="javascript :history.back(-1);">返回</div>
    </div>
    <div id="app">
        <div class="p-6 sm:p-10 md:p-16 flex flex-wrap">

            <div v-show="showCollection" class="w-full md:w-1/6 md:pr-8 order-3 md:order-1">
                <div class="md:float-right md:text-right leading-loose tracking-tight md:sticky md:top-0 ">
                    <p class="font-bold my-4 md:my-12">合集列表</p>
                    <ul class="flex flex-wrap justify-between flex-col menu-list" v-for="menuItem in menuList" :key="menuItem.id" @click.prevent="forward(menuItem.id)">
                        <li>
                            <div class="nav menu-item">{{menuItem.menuName}}</div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="w-full md:w-5/6 order-1 md:order-2">
                <div class="max-w-6xl leading-loose tracking-tight">
                    <div id="top_menu">
                        <div v-for="menuItem in topMenu" :class="menuItem.className" @click.prevent="slide(menuItem.length)">{{menuItem.name}}</div>
                    </div>

                    <div id="viewer">
                        <strong>Loading ...</strong>
                        <br>
                        <strong>正在加载中 ,请稍后 ...</strong>
                    </div>
                </div>
            </div>

        </div>

    </div>


</div>

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="js/jquery-ui-1.11.0.js"></script>
<script src="js/ant/ant-utils.js"></script>
<script src="js/initCommon.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/restApi.js"></script>

<script src="js/markdown/toastui-editor-viewer.js"></script>
<script src="js/markdown/toastui-editor-plugin-code.js"></script>

<script src="js/menu/anime.js"></script>
<script src="js/menu/menu.js"></script>

<script src='vue/vue.min.js'></script>
<script type="module">


    var itemType = restUtuls.getQueryString("type");
    var itemKey = restUtuls.getQueryString("key");
    if (antUtils.isnull(itemType) && antUtils.isnull(itemKey)) {
        var searchCache = antUtils.cacheGet("view");
        itemType = searchCache.type;
        itemKey = searchCache.key;
    }
    if (antUtils.isnull(itemType) && antUtils.isnull(itemKey)) {
        window.location.href = "blog-home.html"
    }
    searchCache = {type: itemType, key: itemKey}
    antUtils.cacheSet('view', searchCache);

    const Editor = toastui.Editor;
    const {codeSyntaxHighlight} = Editor.plugin;
    var app = new Vue({
        el: "#app",
        data: {
            menuList: {},
            search: {},
            showCollection: {},
            topMenu: []
        },
        computed: {},
        beforeCreate: function () {

        },
        methods: {
            forward: function (key) {
                searchCache.key = key;
                antUtils.cacheSet('view', searchCache);
                $(".doc-menu-container").html("<div id=\"myMenu\"></div>");
                app.viewGet();
            },
            slide: function (length) {
                // $(document).animate({'scrollTop': '0px'}, length);
                $(document).scrollTop(length);
            },
            viewGet: function () {
                var $self = this;
                var key = $self.search['key'] == null ? "0" : $self.search['key'];
                restApi.getViewList({"type": $self.search['type'], "key": key}, function (data, menu) {
                    var content = antUtils.mkExchangeArray(data.contentBody).join('\n');
                    try {
                        const viewer = new toastui.Editor({
                            el: document.querySelector('#viewer'),
                            initialValue: content,
                            plugins: [codeSyntaxHighlight]
                        });
                    } catch (e) {

                    }

                    $self.menuList = menu;

                    var menuItem = [];
                    var menu = new Menu("#myMenu");
                    var item1 = new Item("list");
                    menu.add(item1);

                    var topMenu = [];
                    $("#viewer h2,h3").each(function (item) {
                        var title = $(this).html();
                        var where = $(this).offset().top;
                        var className = "h3title";
                        if (this.tagName == "H2") {
                            var item2 = new Item("link", title, colorArray[Math.ceil(Math.random() * 10)], where);
                            menu.add(item2);
                            className = "h2title";
                        }

                        topMenu.push({"name": title, "length": where, "className": className});
                    });
                    $self.topMenu = topMenu;

                    $(".docmenu_item").click(function () {
                        $(document).scrollTop($(this).attr("mlocation"));
                    });

                    $(document).delay(50).queue(function (next) {
                        menu.open();
                        next();
                    });
                })
            }
        },
        watch: {},
        mounted() {
            this.search = searchCache;
            this.showCollection = antUtils.isnull(searchCache.type) ? false : true;
            // document.title = searchCache['type'] == nul ? searchCache['key'] : searchCache['type'];
            setTimeout(this.viewGet, 200);


        },
        directives: {},
        components: {},
        filters: {}
    });

</script>


<script>


</script>

</body>
</html>
